<!--  -->
<template>
    <div :class="['li-col', span && `li-col-${span}`]" :style="styles">
        <!-- <div v-if="gutter > 0"> -->
        <slot></slot>
        <!-- </div>
        <slot v-else></slot> -->
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed, inject } from 'vue';

const props = defineProps({
    // 填充
    flex: {
        type: [Number, String],
        default: 0
    },
    // col占比
    span: {
        type: Number,
        default: 0
    },
    // 排序
    order: {
        type: [Number, String],
        default: 0
    }
});

const gutter = inject('gutter');

const styles = computed(() => {
    let style: object = {};
    if (props.flex) {
        if (/^[0-9]+$/.test(props.flex)) {
            style['flex'] = props.flex;
        } else if (props.flex === 'auto') {
            style['flex'] = `1 1 ${props.flex}`;
        } else {
            style['flex'] = `0 0 ${props.flex}`;
        }
    }
    if (props.order) {
        style['order'] = props.order;
    }
    if (gutter > 0) {
        style['padding-left'] = gutter / 2 + 'px';
        style['padding-right'] = gutter / 2 + 'px';
        console.log(style);
    }
    console.log(style);
    return style;
});

onMounted(() => {});

const install = (app: any) => {
    app.component('LiCol', this);
};
</script>

<style lang="less" scoped>
@import './li-row-col.less';
</style>
